<script setup>
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { getAllLists } from "@/api/user.js";

// 获取项目
const gerenList = ref([]);
const teamList = ref([]);

const router = useRouter();

// 跳转到打分页面
const goGrade = (row) => {
  const path = row.type == 0 ? '/match/gerenGrade' : '/match/teamGrade'
  router.push({
    path:path,
    query:{projectId:row.projectId,
      name:row.name,
    }
  })
}

// 获取数据
const list = async () => {
  try {
    const resp = await getAllLists();
    gerenList.value = resp.data.gerenList;
    teamList.value = resp.data.teamList;
  } catch (error) {
    ElMessage.error("服务器异常，请稍后重试");
  }
};

onMounted(() => {
  list();
});

// 时间格式化
const formatDate = (dateString) => {
  const date = new Date(dateString);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  return `${year}-${month}-${day}`;
};

// 判断比赛状态
const getEventStatus = (eventTime) => {
  const now = new Date();
  const eventDate = new Date(eventTime);
  if (eventDate > now) {
    return "未开始"; // 比赛未开始
  } else if (eventDate.toDateString() === now.toDateString()) {
    return "进行中"; // 比赛进行中
  } else {
    return "已结束"; // 比赛已结束
  }
};
</script>

<template>
  <!-- 个人赛 -->
  <div style="margin-top: 10px;">
    <div style="height: 30px; background-color: #9ac7f7">
      <span>个人赛</span>
    </div>
    <el-table :data="gerenList" style="width: 100%">
      <el-table-column label="项目编号" prop="number"></el-table-column>
      <el-table-column label="比赛项目" prop="name"></el-table-column>
      <el-table-column label="地点" prop="place"></el-table-column>
      <el-table-column label="比赛时间" prop="eventTime">
        <template #default="scope">
          {{ formatDate(scope.row.eventTime) }}
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template #default="scope">
          <span :class="{
            'status-active': getEventStatus(scope.row.eventTime) === '进行中',
            'status-inactive': getEventStatus(scope.row.eventTime) !== '进行中'
          }">
            {{ getEventStatus(scope.row.eventTime) }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120">
        <template #default="{ row }">
          <el-button :icon="Edit" type="primary" circle round @click="goGrade(row)"></el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="啥也没有" />
      </template>
    </el-table>
  </div>

  <!-- 团体赛 -->
  <div style="margin-top: 10px;">
    <div style="height: 30px; background-color: #9ac7f7">
      <span>团体赛</span>
    </div>
    <el-table :data="teamList" style="width: 100%">
      <el-table-column label="项目编号" prop="number"></el-table-column>
      <el-table-column label="比赛项目" prop="name"></el-table-column>
      <el-table-column label="地点" prop="place"></el-table-column>
      <el-table-column label="比赛时间" prop="eventTime">
        <template #default="scope">
          {{ formatDate(scope.row.eventTime) }}
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template #default="scope">
          <span :class="{
            'status-active': getEventStatus(scope.row.eventTime) === '进行中',
            'status-inactive': getEventStatus(scope.row.eventTime) !== '进行中'
          }">
            {{ getEventStatus(scope.row.eventTime) }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120">
        <template #default="{ row }">
          <el-button :icon="Edit" type="primary" circle round @click="goGrade(row)"></el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="这里有遗留过的痕迹" />
      </template>
    </el-table>
  </div>
</template>

<style scoped lang="scss">
.status-active {
  color: green;
  font-weight: bold;
}

.status-inactive {
  color: gray;
}
</style>
